import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
// 引入进度条
import nprogress from 'nprogress';
// 引入进度条样式
import 'nprogress/nprogress.css';
import i18n from '@/locales/index';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    component: () => import('../views/Home/index.vue'),
    meta: {
      title: i18n.global.t('home'),
    },
    children: [],
  },
  {
    path: '/about',
    component: () => import('../views/About/index.vue'),
    meta: {
      title: i18n.global.t('about'),
    },
    children: [],
  },
  // {
  //   path: "/:404(.*)",
  //   meta: { title: "404", menu: false },
  //   component: () => import("@/pages/[...404]/index.vue"),
  // },
];

/** 创建路由实例 */
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    };
  },
});

// 去除加载条的圈圈
nprogress.configure({ showSpinner: false });

/**
 * @Description: 全局的前置守卫
 * @param {} to 你将要访问的哪个路由
 * @param {} from 你从哪个路由来
 * @param {} next 路由放行函数
 */
router.beforeEach((to, from, next) => {
  nprogress.start();

  next();
});

/**
 * @Description: 全局的后置守卫
 * @param {} to 你将要访问的哪个路由
 * @param {} from 你从哪个路由来
 */
router.afterEach((to) => {
  nprogress.done();
  document.title = `${to.meta.title}`; // 修改浏览器title
});

export default router;
